<template>
  <div :class="{'mobile-legal-components': showMobilePage}" class="period-of-year-wrap">
    <div v-if="!isExhibition" class="base-date">
      <el-form-item :prop="moduleName + '.amount'" label="">
        <el-input v-model="selectData.amount" oninput="if(value>999999999999)value=999999999999" placeholder="请输入金额" type="number" />
      </el-form-item>
      <el-form-item style="margin-left: 15px;" label="抽成比例" label-width="75px" class="mobile-item-left">
        <el-input v-model="selectData.ratioCommission" oninput="if(value>999999999999)value=999999999999" placeholder="请输入抽成比例" type="number" />
      </el-form-item>
    </div>
    <div v-if="!isExhibition" :class="{'mobile-create-flex': showMobilePage}" class="stages-box">
      <div class="stages">
        <div v-for="(item, index) in selectData.payDates" :key="index" class="date-picker-item stages-date-picker-error">
          <el-form-item :rules="rules['contractInfo.moneyInvolved.payDates.payDate']" :prop="'contractInfo.moneyInvolved.payDates.' + index + '.payDate'">
            <stages-date-picker :index="index" v-model="item.payDate" @delete="deleteStage" />
          </el-form-item>
        </div>
      </div>
      <div v-if="isCanAddDate" class="add-btn" @click="add">
        添加
      </div>
    </div>
    <div v-if="isExhibition">
      <div style="display: flex;">
        <div>
          <span>{{ selectData.amount || '--' }}</span>
        </div>
        <div v-if="selectData.ratioCommission" style="margin-left: 24px">
          <span>{{ selectData.ratioCommission || '--' }}</span><span>(比例抽成)</span>
        </div>
      </div>
      <template v-if="selectData.payDates && selectData.payDates.length">
        <div v-for="(item, index) in selectData.payDates" :key="index" style="color: #666;">
          {{ `付款日期（第${index + 1}期）: ` }}{{ item.payDate / 1000 | standardFormat('YYYY/MM/DD') }}
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { settleAccountPeriodOptions, mffTypeOptions } from '../../module/options';
import StagesDatePicker from './stagesDatePicker';
import addIcon from '@/assets/reportManage/add_icon.png';
import { standardFormat } from '@/filters/date';
import { mapState } from 'vuex';
export default {
  name: 'MoneyInvolved',
  components: { StagesDatePicker },
  filters: { standardFormat },
  model: {
    prop: 'params',
    event: 'change'
  },
  props: {
    params: {
      type: Object,
      default: () => {
        return null;
      }
    },
    moduleName: {
      type: String,
      default: ''
    },
    rules: {
      type: Object,
      default: () => {
        return null;
      }
    },
    legalType: {
      type: Number,
      default: -1
    },
    isExhibition: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      settleAccountPeriodOptions,
      mffTypeOptions,
      addIcon,
      legalDate: null
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    selectData: {
      get() {
        return this.params;
      },
      set(val) {
        this.$emit('change', val);
      }
    },
    isCanAddDate() {
      return this.selectData.payDates.length < 24;
    }
  },
  methods: {
    add() {
      const item = { payDate: '' };
      this.selectData.payDates.push(item);
    },
    deleteStage(index) {
      if (index !== -1) {
        this.selectData.payDates.splice(index, 1);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import url('./common.scss');
.period-of-year-wrap {
  // width: 440px;
  & ::v-deep {
    .el-form-item__error {
      padding-top: 2px;
    }
    .el-input__inner {
      max-width: 240px;
      min-width: 134px !important;
      width: calc(100vw * 0.13);
      height: 32px;
      line-height: 32px;
      border-color: #ddd;
    }
    .small-input {
      .el-input__inner {
        max-width: 120px;
        min-width: 120px !important;
      }
    }
  }
}

.stages-date-picker-error {
  & ::v-deep {
    .el-form-item__error {
      margin-left: 120px;
    }
  }
}

.base-date {
  display: flex;
  align-items: center;
  .input-dec {
    margin-left: 12px;
    margin-right: 56px;
    color: #999;
    font-size: 14px;
  }
}

@media screen and (max-width: 1176px) {
  .base-date {
    .input-dec {
      margin-left: 0px;
      margin-right: 6px;
    }
  }
}
@media screen and (min-width: 1176px) and (max-width: 1320px) {
 .base-date {
    .input-dec {
      margin-left: 0px;
      margin-right: 16px;
    }
  }
}
.mobile-legal-create {
  .mobile-legal-components {
    .base-date {
      flex-wrap: wrap;
    }
    .mobile-item-left {
      margin-left: 0 !important;
      ::v-deep  .el-form-item__label {
          width: 75px !important;
        }
    }
    & ::v-deep {
      .el-input__inner {
        min-width: unset !important;
        max-width: unset !important;
        width: 100% !important;
      }
    }
  }
}
.mobile-create-flex {
  ::v-deep {
    .el-form-item {
      margin-bottom: 16px !important;
    }
    .el-form-item__error {
      margin-left: 0 !important;
    }
  }
  .stage-items {
    flex-wrap: wrap;
  }
  .date-picker-item {
    margin-bottom: 0 !important;
  }
}
</style>
